<template>
	<view>
		<view class="tel-box">
			<view class="tel-content">
				<view class="hide">
					<view>
						<view class="name">
							{{infoList.name}}
						</view>
						<view class="cate">
							{{infoList.category}}
						</view>
					</view>
					<view class="">
						<view class="avatar">
							<image :src="infoList.logo" mode=""></image>
						</view>
						<view class="eye">
							<view class="">
								<image src="/static/mu.png" mode=""></image>
							</view>
							<view class="text">
								<text>132</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tel-content">
				<view class="Contact">
					<view class="list">
						<view class="">
							<image src="/static/telbook/icon1.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.contacts}}
						</view>
					</view>
					<view class="list">
						<view class="">
							<image src="/static/telbook/icon2.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.openTime}}-{{infoList.closeTime}}
						</view>
					</view>
					<view class="list">
						<view class="">
							<image src="/static/telbook/icon3.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.mobile}}
						</view>
					</view>
					<view class="list">
						<view class="">
							<image src="/static/telbook/icon4.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.address}}
						</view>
					</view>
				</view>
				<view class="date">
					<view class="">
						Register Date: 2022-6-9
					</view>
					<view class="">
						Expired Date: 2022-6-9
					</view>
				</view>
			</view>
			<view class="tel-content">
				<view class="fbox fbox-acenter fbox-jbetween">
					<view class="title fbox fbox-acenter">
						<image src="/static/information/line.png" mode="widthFix"></image>
						<text class="color3 f36">Other Contact</text>
					</view>
				</view>
				<view class="Contact">
					<view class="list">
						<view class="">
							<image src="/static/telbook/list-icon1.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.mobile}}
						</view>
					</view>
					<view class="list">
						<view class="">
							<image src="/static/telbook/list-icon2.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.wxcode}}
						</view>
					</view>
					<view class="list">
						<view class="">
							<image src="/static/telbook/list-icon3.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.facebook}}
						</view>
					</view>
					<view class="list">
						<view class="">
							<image src="/static/telbook/list-icon4.png" mode=""></image>
						</view>
						<view class="text">
							{{infoList.instagram}}
						</view>
					</view>
				</view>
			</view>
			<view class="tel-content">
				<view class="fbox fbox-acenter fbox-jbetween">
					<view class="title fbox fbox-acenter">
						<image src="/static/information/line.png" mode="widthFix"></image>
						<text class="color3 f36">Activity Scope</text>
					</view>
				</view>
				<view class="">
					<u-parse class="parse" :html="infoList.management" @linkpress="onlinkTap"></u-parse>
				</view>
			</view>
			<report :id="id"></report>
			<u-tabs itemStyle="width: 25%; padding:10px 15px 0 15px;height: 36px;" :list="list1" @click="click">
			</u-tabs>
			<view>
				<view style="padding: 20rpx 30rpx;" v-if="index == 0">
					<u-parse class="parse" :html="infoList.detail" @linkpress="onlinkTap"></u-parse>
				</view>
				<view style="padding: 20rpx 30rpx;" v-if="index == 1">
					<u-album :urls="infoList.imgs" multipleSize="160" rowCount="2" keyName=""></u-album>
				</view>
				<view style="padding: 20rpx 0rpx;" v-if="index == 2">
					<comments type="telBook" class="comments" :id="id" :ishide="false" @init="getcomment"
						:commentList="commentList" @getcomment="getcomment">
					</comments>
				</view>
			</view>
			<zero-back-top :scrollTop="scrollTop"></zero-back-top>
			<tabbar type="telBook" :commentlength="commentList.length" :isLike="infoList.isLike"
				:isCollection="infoList.isCollection" @init="getdetails" :id="id" :likeNum="likeNum"></tabbar>
			<u-modal :show="show" :cancelText="cancelText" @confirm="confirm" @cancel="cancel"
				:confirmText="confirmText" :title="title" :showCancelButton="true" :content='content'></u-modal>
		</view>
	</view>
</template>

<script>
	import report from "@/components/report.vue"
	import comments from "@/components/comments.vue"
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			report,
			comments,
			tabbar,
		},
		data() {
			return {
				rate: 5,
				id: '',
				infoList: [],
				likeList: [],
				commentList: [],
				opinioninfo: {},
				thumbup: '50',
				thumbdown: '50',
				scrollTop: 0,
				list1: [{
					name: this.$t('Business.Details'),
				}, {
					name: this.$t('Business.Photos'),
				}, {
					name: this.$t('Business.Comments')
				}],
				index: 0,
				likeNum: '0',
				show: false,
				urllinke: '',
				cancelText: this.$t('user.cancel'),
				confirmText: this.$t('user.yes'),
				content: this.$t('user.open'),
				title: this.$t('user.prompt'),
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(e) {
			this.id = e.id
			console.log(e)
			this.getdetails()
			this.getcomment()
		},
		methods: {
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
				plus.runtime.openURL(this.urllinke)
			},
			onlinkTap(e) {
				e.ignore()
				console.log(e)
				this.show = true
				this.urllinke = e.href
			},
			govr(url) {
				uni.navigateTo({
					url: '/pages/VR/index?url=' + url
				})
			},
			click(item) {
				console.log('item', item);
				this.index = item.index
			},
			getcomment() {
				const params = {
					map: 'applet_city_shop_comment_list',
					sid: this.id,
					page: 0,
					version: 'newest',
					type: 1
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						this.commentList = res.data.data.list
					} else {

					}
				})
			},
			getdetails() {
				let params = {
					map: "applet_mobile_shop_detail",
					sid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res, '2222')
						this.infoList = res.data.data
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tel-box {
		width: 100%;
		background-color: #FFFFFF;

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}
		}

		.Contact {
			.list {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.text {
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
		}

		.date {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			view {
				padding: 5rpx 10rpx;
				background-color: #eeeeee;
				font-size: 24rpx;
				color: #999;
				border-radius: 10rpx;
			}
		}

		.tel-content {
			padding: 0 30rpx 20rpx 30rpx;

			.hide {
				display: flex;
				justify-content: space-between;

				.name {
					padding: 20rpx 0;
					font-weight: bold;
				}

				.cate {
					background-color: #f4f4f4;
					padding: 5rpx 15rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					color: #00aaff;
					display: inline-block;
				}

				.avatar {
					image {
						width: 120rpx;
						height: 120rpx;
					}
				}

				.eye {
					display: flex;
					width: 80rpx;
					margin: 0 auto;

					image {
						width: 30rpx;
						height: 25rpx;
					}

					.text {
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			.title {
				padding: 20rpx 0;
				font-weight: bold;

				image {
					width: 8rpx;
					margin-right: 20rpx;
				}
			}


		}

		.trash {
			padding: 5rpx 20rpx;
			background-color: #00aaff;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #fff;
			margin-top: 10rpx;
		}
	}

	.parse {
		font-size: 24rpx;
	}
</style>
